<template>
	<view class="container">
		<view class="houselist">
			<template v-if="houseList.total > 0">
				<template v-for="(item, index) in houseList.data">
					<!-- <navigator class="houseitem flex" :url="'/pages/house/building_detail/building_detail?id=' + item.id" open-type="navigate" @click="goToDe(item)"> -->
					<view class="houseitem flex" @click="goToDe(item.house)">
						<view class="flex-box targets">
							<view v-if="item.house.house_tag_ids_text1" class="tar1">{{ item.house.house_tag_ids_text1 }}</view>
						</view>
						<view class="houseimg">
							<u--image :showLoading="true" :lazy-load="true" :src="item.house.image_text" radius="10rpx"
								width="240rpx" height="190rpx" mode="aspectFill"></u--image>
						</view>
						<view class="flex-grow-1">
							<view class="housename m-ellipsis fwb">{{ item.house.name }}</view>
							<view class="area-size">
								<text>{{ item.house.region }}</text>
								<text class="plr10">|</text>
								<text>建面{{ item.house.min_space }}㎡-{{ item.house.max_space }}㎡</text>
							</view>
							<view class="targetbox flex-box flexwa">
								<view v-for="(targets, index2) in item.house.house_tag_ids_text_arr2" :key="index2" class="targetitem">
									{{ targets }}
								</view>
								<view v-if="item.house.rank_json_text" class="number_one">
									<image src="/static/icon/icon_reward.png" class="icon_reward"></image>
									<view>{{ item.house.rank_json_text }}</view>
								</view>
							</view>
							<view class="housecost fwb">
								<text class="pr20">{{ item.house.price }}万起</text>
								{{ item.house.first_price_msg ? item.house.first_price_msg : '' }}
							</view>
						</view>
					</view>
				</template>
				<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
					nomore-text="没有更多了" />
			</template>
			<template v-else>
				<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
				</u-empty>
			</template>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				houseList:[],
			}
		},
		
		onLoad: function(options) {
			
			var that = this;
			that.getHouseList();
			
		},
		onShow: function() {
			
		},
		methods: {
			
			// 获取房源列表信息
			getHouseList: function() {
				var that = this;
				var json = {
					
				};
				this.loadStatus = 'loading';
				functions.getAjaxList(that, '/api/xiluhouse/house/my_browse_list', json, function(res) {
					
					that.houseList = res.data;
					console.log(that.houseList);
					
					
				});
				
			},
			
			//推荐房源 新房，二手房跳转
			goToDe(event){
				console.log(event);
				console.log('详情id:'+event.id);
				console.log('新房:'+event.house_type_id);
				
				if (event.house_type_id==16) {
					//新房 = 16
					uni.navigateTo({
						url: '/pages/house/building_detail_news/building_detail_news?id='+event.id
					});
				} 
				if(event.house_type_id==1) {
					// 二手房 = 1
					uni.navigateTo({
						url: '/pages/house/building_detail/building_detail?id='+event.id
					});
				}
				
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.container{
		width:100%;
	}

	.houselist {
		padding: 0 40rpx;
	}

	.houselist .houseitem {
		position: relative;
		padding-bottom: 30rpx;

		.targets {
			position: absolute;
			top: 15rpx;
			left: 15rpx;
		}

		.targets view {
			padding: 2rpx 4rpx;
			color: var(--white);
			font-size: var(--fs16);
			margin-right: 10rpx;
			border-radius: 2rpx;
		}

		.targets .tar1 {
			background-color: #ff7b40;
		}

		.targets .tar2 {
			background-color: #fe6075;
		}

		.targets .tar3 {
			background-color: var(--blue);
		}
	}

	
	.houselist .houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.houselist .housename {
		font-size: var(--fs30);
		padding-bottom: 10rpx;
	}

	.houselist .area-size {
		font-size: var(--fs24);
		color: #898989;
	}

	.houselist .targetbox {
		padding: 14rpx 0 0;
		white-space: nowrap;
		overflow-x: scroll;
		width: 100%;
	}

	.houselist .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: var(--fs18);
		color: var(--normal);
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.houselist .housecost {
		color: var(--red);
		font-size: var(--fs24);
	}

	.houselist .housecost text {
		font-size: var(--fs34);
	}

	.houselist .event {
		padding-top: 11rpx;
		font-size: var(--fs18);
		color: #898989;
	}

	.houselist .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00c4ff, var(--normal));
		color: var(--white);
		margin-right: 10rpx;
	}

	.houselist .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #ff6635, #ffb45c);
		color: var(--white);
		margin-right: 10rpx;
	}
	
</style>
